<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
td div span {
	color: coral;
}
</style>
<script type="text/javascript">
	function checkName() {
		//获取用户名输入控件对象的内容
		var txtName = document.getElementById("txtName").value;
		//信息提示框
		var sptxtName = document.getElementById("sptxtName");
		if (txtName == null || txtName == "") {
			//验证失败
			isChecked = false;
			//提示信息					
			sptxtName.innerHTML = "请输入姓名！";
			sptxtName.style.color = "red";
			//msg += "请输入姓名！\n"
			document.getElementById("txtName").focus();
			//修改标志变量
			return false;
		} else {
			sptxtName.innerHTML = "";
			//修改标志变量
			return true;
		}
	}

	function checkPsw() {
		//密码非空验证
		var txtPsw = document.getElementById("txtPsw").value;

		//信息提示框
		var sptxtPsw = document.getElementById("sptxtPsw");
		if (txtPsw == null || txtPsw == "") {

			//错误提示信息
			//提示信息					
			sptxtPsw.innerHTML = "请输入密码！";
			return false;
		} else {
			//验证通过  清空提示内容
			sptxtPsw.innerHTML = "";
			return true;
		}
	}

	function checkSex() {
		// 验证性别 是否选择
		// 使用循环验证单选组是否进行了选择
		var radioSex = document.getElementsByName("radSex");
		//遍历所有的单选组件，验证是否进行了选择
		var isChSex = false;
		for (var i = 0; i < radioSex.length; i++) {
			//判定是否进行了选择
			if (radioSex[i].checked) {
				//选择了
				isChSex = true;
				//结束循环
				break;
			}
		}

		//信息提示框
		var sptxtSex = document.getElementById("sptxtSex");

		//设置性别验证结果
		if (!isChSex) {
			//错误提示信息
			sptxtSex.innerHTML = "请选择性别！";
			return false;
		} else {
			//清空错误提示信息
			sptxtSex.innerHTML = "";
			return true;
		}
	}

	function checkHobby() {
		// 验证性别 是否选择
		// 使用循环验证单选组是否进行了选择
		var chHobby = document.getElementsByName("chHobby");
		//遍历所有的单选组件，验证是否进行了选择
		var isChHobby = false;
		for (var i = 0; i < chHobby.length; i++) {
			//判定是否进行了选择
			if (chHobby[i].checked) {
				//选择了
				isChHobby = true;
				//结束循环
				break;
			}
		}

		//信息提示框
		var sptxtHobby = document.getElementById("sptxtHobby");
		//设置性别验证结果
		if (!isChHobby) {

			//错误提示信息
			sptxtHobby.innerHTML = "请选择兴趣！";
			return false;
		} else {
			sptxtHobby.innerHTML = "";
			return true;
		}
	}

	function checkGrade() {

		//信息提示框
		var spselectXL = document.getElementById("spselectXL");

		//学历验证 
		var myGrade = document.getElementById("selectXL").value;

		//console.info(myGrade);
		if (myGrade == null || myGrade == "") {
			//验证失败
			//错误提示信息
			spselectXL.innerHTML = "请选择学历！";
			return false;
		} else {
			spselectXL.innerHTML = "";
			return true;
		}

	}

	function checkMe() {
		//用户名验证
		var ischName = checkName();
		//密码验证
		var ischPsw = checkPsw();
		//性别
		var isSex = checkSex();

		//兴趣验证
		var ischHobby = checkHobby();

		//验证学历
		var ischGrade = checkGrade();

		if (ischName && ischPsw && isSex && ischHobby && ischGrade) {
			//验证通过
			return true;
		} else {
			return false;
		}
	}
</script>
</head>

<body>
	<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
	<div align="center">
		<form id="from1" action="index.jsp" method="get">
			<table border="1" cellpadding="0" cellspacing="0"
				bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
				<tbody>
					<tr>
						<td>姓名</td>
						<td><input type="text" id="txtName" name="txtName"
							onblur="checkName();" />
						<div>
								<span id="sptxtName"></span>
							</div></td>
					</tr>
					<tr>
						<td>登录密码</td>
						<td><input type="password" id="txtPsw" name="txtPsw"
							onblur="checkPsw(this);" />
						<div>
								<span id="sptxtPsw"></span>
							</div></td>
					</tr>
					<tr>
						<td>性别</td>
						<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
						<td><input type="radio" id="radSex" name="radSex"
							onclick="checkSex();" /> 女 <input type="radio" id="radSex2"
							name="radSex" onclick="checkSex();" />男
							<div>
								<span id="sptxtSex"></span>
							</div>
					</tr>

					<tr>
						<td>个人简历</td>
						<td><input type="file" id="fileResume" name="fileResume" /></td>
					</tr>
					<tr>
						<td>兴趣爱好</td>
						<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
						<td><input type="checkbox" id="chHobby1" name="chHobby"
							onclick="checkHobby();" />游泳 <input type="checkbox" id="chHobby2"
							name="chHobby" onclick="checkHobby();" />爬山 <input
							type="checkbox" id="chHobby3" name="chHobby"
							onclick="checkHobby();" />dota <input type="checkbox"
							id="chHobby4" name="chHobby" onclick="checkHobby();" />coding <input
							type="checkbox" id="chHobby5" name="chHobby"
							onclick="checkHobby();" />testing
							<div>
								<span id="sptxtHobby"></span>
							</div></td>

					</tr>
					<tr>
						<td>隐藏控件</td>
						<td><input style="" type="hidden" name="txthidden"
							id="txthidden" value="520" /></td>
					</tr>
					<tr>
						<td>学历</td>
						<td><select id="selectXL" name="selectXL"
							style="width: 120px;" onclick="checkGrade();">
								<option value=""></option>
								<option value="DZ">大专</option>
								<option value="BK">本科</option>
								<option value="SS">硕士</option>
								<option value="BS">博士</option>
						</select>
							<div>
								<span id="spselectXL"></span>
							</div></td>
					</tr>
					<tr>
						<td>自我介绍</td>
						<td><textarea id="txtIntroduce" name="txtIntroduce"
								style="width: 200px; height: 60px;"></textarea></td>
					</tr>
					<tr>
						<td>邮箱</td>
						<td><input style="" name="txtMail" id="txtMail" /></td>
					</tr>
					<tr>
						<td><input type="button" value="提交" id="btnSubmit"
							onclick="return doSubmit();" /> <input type="submit" value="提交2"
							id="btnSubmit" onclick="return checkMe();" /></td>
						<td><input type="reset" value="重置" id="btnSubmit" /></td>
					</tr>
				</tbody>
			</table>



		</form>
	</div>
</body>

</html>